<template>
    <div class="user">
        <!-- 只有用到 User 组件的 header 插槽时，$slots.header 才存在， -->
        <!-- 所以我们就可以使用 v-if 来判断了。 -->
        <div v-if="$slots.header" class="user__heder">
            <!-- 命名插槽 -->
            <slot name="header"></slot>
        </div>
         <!-- 默认插槽 -->
         <slot />
    </div>
</template>
  
<script>
  export default {
    mounted() {
      console.log("$slots", this.$slots)
    }
  };
</script>